<template>
  <div>
    <div style="position: relative;">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            v-hasPermi="['hr:salaryMonth:make:add']"
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd()"
          >制作工资
          </el-button>
        </el-col>
      </el-row>
    </div>
    <template>
      <el-table
        v-loading="listLoading"
        class="list-table"
        :data="listData"
        stripe
        size="small"
        fit
        highlight-current-row
        :default-expand-all="isExpand"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        style="width: 100%;"
        @selection-change="handleSelectionChange"
      >
        <!--<el-table-column type="selection" align="center" width="55"/>
        <el-table-column :show-overflow-tooltip="true" prop="id" width="100">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">编号</p>
          </template>
        </el-table-column>-->
        <el-table-column :show-overflow-tooltip="true" prop="salaryMonth">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">发放月份</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.salaryMonth | formatDate('yyyy-MM') }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="title" width="360">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">标题</p>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="salaryType">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">发放类型</p>
          </template>
          <template slot-scope="scope">
            <span v-if="scope.row.salaryType == 20">
              工资补发
            </span>
            <span v-else>
              月薪发放
            </span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="deptName">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">发放部门</p>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" align="center" prop="pnum" width="90">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">工资人数</p>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="status">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">状态</p>
          </template>
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | todoSalaryStateFilter" size="small">{{ scope.row.status |
              todoSalaryStateFilter('text') }}
            </el-tag>
          </template>
        </el-table-column>
        <!--<el-table-column align="center" prop="salaryType">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">工资类型</p>
          </template>
          <template slot-scope="scope">
            {{scope.row.salaryType == 1 : '月工资': '补发工资' }}
          </template>
        </el-table-column>-->
        <el-table-column :show-overflow-tooltip="true" prop="createName">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">填报人</p>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="createTime">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">填报日期</p>
          </template>
          <template slot-scope="scope">
            <div>{{ scope.row.createTime | formatDate('yyyy-MM-dd') }}</div>
          </template>
        </el-table-column>
        <el-table-column
          ref="actionColumn"
          fixed="right"
          align="left"
          label="操作"
          :width="actionWidth"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <template v-if="scope.row.status === '0'">
              <el-button
                ref="actionEdit"
                v-hasPermi="['hr:salaryMonth:make:add']"
                type="primary"
                size="mini"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
              />
              <el-button
                v-hasPermi="['hr:salaryMonth:make:add']"
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
              />
            </template>
            <el-button
              v-else
              ref="actionView"
              v-hasPermi="['hr:salaryMonth:make:add']"
              type="success"
              size="mini"
              icon="el-icon-view"
              @click="handleView(scope.row)"
            />
            <el-tooltip
              v-if="scope.row.status == '10'"
              v-hasPermi="['hr:salaryMonth:make:add']"
              class="item"
              effect="dark"
              content="撤回审批"
              placement="top"
            >
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-back"
                @click="handleBack(scope.row)"
              />
            </el-tooltip>
            <slot name="rights" :row-data="scope.row" />
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="pagination-container">
      <el-pagination
        background
        :current-page="searchKey.pageNum"
        :page-sizes="[10, 20, 50, 100, 200]"
        :page-size="searchKey.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import commonMixins from '@/mixins/common'
import filters from '@/filters/filters'
import tagFilter from '@/filters/tagFilter'

export default {
  name: 'SalaryTable',
  components: {},
  mixins: [commonMixins, filters, tagFilter],
  props: {
    data: { // 列表数据
      type: Array,
      required: true,
      default() {
        return []
      }
    },
    searchParams: { // 搜索参数
      type: Object,
      required: true,
      default() {
        return {}
      }
    },
    totalCount: {
      type: [String, Number],
      required: true,
      default: 0
    },
    listLoading: {
      type: [Boolean],
      required: true,
      default: false
    }
  },
  data() {
    return {
      searchKey: {},
      isExpand: true,
      tableSelectedData: [], // 选中的表数据
      listData: [] // 列表数据
    }
  },
  computed: {
    ...mapGetters('user', [
      'userInfo'
    ]),
    actionWidth() {
      const { permissionValue, baseWidth } = {
        baseWidth: 60,
        permissionValue: ['hr:salaryMonth:make:add']
      }
      let width = baseWidth
      const all_permission = '*:*:*'
      const permissions = this.$store.getters.permissions
      if (permissionValue.length > 0) {
        const isAllPermission = permissions.some(permission => { // 是否全部权限
          return all_permission === permission
        })
        const existingPermissions = permissions.filter(permission => { // 存在的权限
          return permissionValue.includes(permission)
        })
        if (isAllPermission) {
          width += permissionValue.length * 60
        } else {
          width += existingPermissions.length * 60
        }
      }
      return width
    }
  },
  watch: {
    data: {
      handler: function(newVal, oldVal) {
        if (JSON.stringify(newVal) !== JSON.stringify(this.listData)) {
          this.listData = JSON.parse(JSON.stringify(newVal))
        }
      },
      deep: true,
      immediate: true
    },
    searchParams: {
      handler: function(newVal, oldVal) {
        if (JSON.stringify(newVal) !== JSON.stringify(this.searchKey)) {
          this.searchKey = JSON.parse(JSON.stringify(newVal))
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    handleSizeChange(val) { // 分页改变每页条数
      this.searchKey.pageSize = val
      this.$emit('on-init', this.searchKey)
    },
    handleCurrentChange(val) { // 分页切换分页
      this.searchKey.pageNum = val
      this.$emit('on-init', this.searchKey)
    },
    handleSelectionChange(selection) { // 多选框选中数据
      this.tableSelectedData = selection
    },
    handleAdd(data = null) { // 新增按钮操作
      this.$emit('on-edit', data)
    },
    handleUpdate(data = null) { // 修改按钮操作
      const { tableSelectedData } = this
      this.$emit('on-edit', data || tableSelectedData[0])
    },
    handleView(data = null) { // 查看详情－显示弹出框
      this.$emit('on-view', data)
    },
    handleBack(data = null) {
      this.$emit('on-back', data)
    },
    handleDelete(data = null) { // 删除
      const { tableSelectedData } = this
      this.$emit('on-delete', data || tableSelectedData[0])
    }
  }
}
</script>

<style lang="scss" scoped>
  .list-table {
    .el-button--mini {
      padding: 7px 15px;
      width: 45px;
      color: #fff;
    }

    & /deep/ .el-table__header-wrapper {
      th {
        background-color: #fff;
      }
    }
  }
</style>
